import React, { Component } from 'react';
import {
  StyleSheet, View, TouchableOpacity, Image, Dimensions,
} from 'react-native';
import ZlstIcon from '../../components/zlst-icons';

const deviceWidth = Dimensions.get('window').width;

class Tab extends Component {
  toAddIncident = () => {
    global.navigation.navigate({ routeName: 'AddIncident', params: { flag: 'add', sbid: '', sbmc: '', sbbm: '', equipObjType: '', maintOrgId: '', maintOrgName: '' } });
  }

  toMyInfo = () => {
    global.navigation.navigate({ routeName: 'Mine' });
  }

  render() {
    return (
      <View style={{ flexDirection: 'column', width: '100%', bottom: 0, position: 'absolute', zIndex: 1 }}>
        <Image
          source={require('../../../assets/images/btn-cut-line-xxx.png')}
          style={{ width: deviceWidth, height: 2, alignItems: 'center' }}
          resizeMode="stretch"
          resizeMethod="auto"
        />
        <View style={styles.footer}>
          <View style={styles.icon_container}>
            <ZlstIcon
              name="shouye"
              size={22}
              color="white"
            />
          </View>
          <TouchableOpacity style={styles.icon_container} onPress={this.props.toAddPage}>
            {/* <MyIcon color="white" name="add-circle" /> */}
            <Image
              style={{ width: 28, height: 28 }}
              resizeMode="contain"
              source={require('../../../assets/images/add.png')}
              fadeDuration={0}
            />
          </TouchableOpacity>
          <TouchableOpacity style={styles.icon_container} onPress={this.toMyInfo}>
            <ZlstIcon
              name="wode"
              size={22}
              color="white"
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    height: 48,
  },
  icon_container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    color: 'white',
    padding: 10,
  },
});

export default Tab;
